<script setup>
import { ref, watch } from 'vue'
import { registerService, loginService } from '@/api/user'
import { userStore } from '@/stores/index'
import { useRouter } from 'vue-router';
const userstore = new userStore()
const router = new useRouter()
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '长度在9到15之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,11}$/, message: '密码长度在6到11之间', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,11}$/, message: '密码长度在6到11之间', trigger: 'blur' },
    {
      validator: (rules, value, callback) => {
        if (value !== formModel.value.password) {
          callback('两次密码输入不一致')
        } else {
          callback()
        }
      }, trigger: 'blur'
    },
  ]
}
const form = ref()
const flag = ref(false)
const ischangeflag = () => {
  flag.value = !flag.value
}
const register = async () => {

  await form.value.validate()
  const res = await registerService(formModel.value)
  ElMessage.success('注册成功')
  flag.value = false


}
const login = async () => {
  await form.value.validate()
  const { data } = await loginService(formModel.value)
  ElMessage.success({
    message: data.message,
    duration: 500
  })
  userstore.setToken(data.token)
  router.push('/')
}

watch(flag, () => {
  formModel.value = {
    username: '',
    password: '',
    repassword: ''
  }
})
</script>

<template>

  <!-- 登陆页面 -->

  <div class="login">
    <div class="left">
      <img src="@/assets/logo2.png" alt="">
    </div>

    <div class="right">

      <div class="reg-box" v-if="flag">
        <h1>注册 </h1>
        <el-form ref="form" :model="formModel" :rules="rules" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input class="m1" prefix-icon="User" v-model="formModel.username" type="text"
              placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input class="m1" prefix-icon="Lock" v-model="formModel.password" type="password" placeholder="请输入密码"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input class="m1 " prefix-icon="Lock" v-model="formModel.repassword" type="password"
              placeholder="请再次输入密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn-reg" type="primary" @click="register()">注册</el-button>
          </el-form-item>
        </el-form>
        <p class="change"><el-icon size="16px">
            <ArrowLeft />
          </el-icon><a href="#" @click="ischangeflag">返回</a></p>
      </div>

      <div class="log-box" v-else>
        <h1>登录</h1>
        <el-form ref="form" :model="formModel" :rules="rules" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input class="m1" prefix-icon="User" v-model="formModel.username" type="text"
              placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input class="m1" prefix-icon="Lock" v-model="formModel.password" type="password" placeholder="请输入密码"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="checkbox">
              <el-checkbox>记住我</el-checkbox>
              <a href="#">忘记密码?</a>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button class="btn-reg" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
        <p class="change"><a href="#" @click="ischangeflag">注册</a><el-icon size="16px">
            <ArrowRight />
          </el-icon></p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {

  width: 100vw;
  height: 100vh;
  display: flex;

  .left,
  .right {
    width: 50%;
    height: 100%;
  }

  .left {
    background: url('@/assets/login_bg.jpg') no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    text-align: center;
    position: relative;
    border-radius: 0 30px 30px 0;

    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 250px;
    }
  }

  .right {

    box-sizing: border-box;

    .reg-box,
    .log-box {
      margin: 0 auto;
      padding-top: 120px;
      width: 450px;

      h1 {
        margin-bottom: 50px;
      }

      .checkbox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-right: 3px;

        a {
          color: steelblue;
        }
      }

      .m1 {
        height: 50px;
        margin-bottom: 10px;
      }

      .btn-reg {
        width: 100%;
        height: 50px;
        font-size: 16px;
      }

      .change {
        display: flex;
        align-items: center;

        a {
          text-decoration: none;
          color: #3b3b3b;
        }
      }

    }
  }
}
</style>